<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <h3>组件prop测试</h3>

        <div>
            <p>
                {{count}}
            </p>
            <button @click="count++">点击</button>
            <button @click="$emit('addCount')">点击</button>
        </div>
    </div>
</body>
<script>
    // Vue中如何 新增 删除 触发 自定义事件 
    // vm.$on(event,fn)    vm.$once(event,fn)  绑定自定义事件 
    // vm.$off(event,fn)

    // vm.$emit(event)

    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            isShow: true,
        },
        mounted() {
            this.$on("addCount", () => {
                this.count++
            })
        },
    })

    // console.log(vm);

    // var fn = function (arg) {
    //     console.log("helloVue被触发", arg);
    // };

    // // 绑定自定义事件
    // vm.$on("helloVue", fn)

    // // 触发自定义事件
    // vm.$emit("helloVue", 100);

    // // 清除自定义事件
    // vm.$off("helloVue", fn);

    // vm.$emit("helloVue", 200);





</script>

</html>